<template>
	<view class="withdraw-page">
		<!-- 顶部导航 -->
		<intake-nav-bar title="提现" dark :fixed="true" />
		<!-- 银行卡选择 -->
		<view class="bank-card-section">
			<view class="section-title">到账银行卡</view>
			<view class="bank-card-item">
				<view class="bank-card-left">
					<view class="bank-icon">
						<image :src="bankInfo.bank_info.icon"></image>
					</view>
					<view class="bank-info" @click="changeCard('bottom')">
						<view class="bank-name">
							{{ bankInfo.bank_info.name }}({{ bankInfo.number.substr(bankInfo.number.length - 4) }})</view>
						<view class="arrival-time">预计7工作日内到账</view>
					</view>
				</view>
				<uni-icons type="right" size="16" color="#C5C6C7" />
			</view>
		</view>

		<!-- 提现金额输入 -->
		<view class="amount-section">
			<view class="amount-input-area">
				<view class="amount-label">提现金额</view>
				<view class="amount-input-wrapper">
					<text class="currency-symbol">¥</text>
					<input type="digit" class="amount-input" inputmode="decimal" placeholder="请输入提现金额" v-model="txMoney" @input="checkAmount" />
					<!-- <input type="number" v-model="txMoney"  @input="handleInput"  class="amount-input" placeholder="请输入提现金额" /> -->
				</view>
				<view class="available-amount">
					可提现金额￥{{ money }}元
				</view>
			</view>
		</view>

		<!-- 提现按钮 -->
		<view class="submit-section">
			<button class="submit-btn" type="primary" @click="save">确认提现</button>
		</view>
		<uni-popup ref="popup" background-color="#fff" mode="top">
			<view class="popup-content">
				<view class="title">选择银行卡</view>
				<view class="bank-card-item" v-for="(item, index) in bankList">
					<view class="bank-card-left">
						<view class="bank-icon">
							<image :src="item.bank_info.icon"></image>
						</view>
						<view class="bank-info" @click="closeCard(item)">
							<view class="bank-name">{{ item.bank_info.name }}({{ item.number.substr(item.number.length -
								4)}})</view>
							<view class="arrival-time">预计7个工作日内到账</view>
						</view>
					</view>
					<uni-icons type="right" size="16" color="#C5C6C7" />
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { getBankList, queryResidueMoney, saveCash } from '@/api/user/userScore'
export default {
	data() {
		return {
			images: this.$common.imgUrl() + '/images/welcome.png',
			bankList: [],
			bankId: '',
			bankInfo: {},
			money: 0,
			txMoney: ''
		};
	},
	async onLoad(query) {
		await this.getBankLists();
		await this.queryResidueFun()
	},
	methods: {
		checkAmount(e) {
   			// 部分情况 , 事件参数e会有一定区别, 这里只需要 e.detail.value 是输入的那个字符串即可
			let num = e.detail.value.match(/^\d*(\.?\d)/g)[0] || null;
			this.$nextTick(() => {
					this.txMoney= num;
			});
		},
		handleInput(event){
			event.target.value = event.target.value.replace(/[^\d]/g, '');
		},
		queryResidueFun() {
			queryResidueMoney().then(res => {
				this.money = res.data.score
			})
		},
		changeCard(type) {
			this.$refs.popup.open(type)
		},
		closeCard(e) {
			this.bankId = e.id 
			this.bankInfo = {
				bank_info: e.bank_info,
				number: e.number
			}
			this.$refs.popup.close()
		},
		// 银行卡列表
		getBankLists() {
			getBankList().then(res => {
				this.bankList = res.data
				this.bankInfo = res.data[0]
				this.bankId = res.data[0].id
			})
		},
		save() {
			
			if (this.txMoney > this.money) {
				this.$utils.showToast('输入金额不能大于提现金额！');
			} else {
				if(this.txMoney[0] === '0'){
					this.txMoney = this.txMoney.slice(1)
				}
				saveCash({ score: this.txMoney, user_bank_id: this.bankId }).then(res => {
					if (res.status === 0) {
						this.$utils.showToast('提现成功！');
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/user/index'
							});
						}, 2000);
					}
				})
			}
		}
	}
}
</script>

<style lang="scss">
page {
	width: 100%;
	height: 100vh;
	background: linear-gradient(to bottom, #E3EAFB 0%, transparent 100%);
	border: solid;
}

.withdraw-page {
	height: 100%;
	padding: 0 32rpx;
}

.nav-header {
	display: flex;
	align-items: center;
	height: 88rpx;
	margin-bottom: 32rpx;
}

.nav-left {
	width: 48rpx;
	height: 48rpx;
	display: flex;
	align-items: center;
}

.nav-title {
	flex: 1;
	text-align: center;
	font-size: 16px;
	font-weight: 500;
	margin-right: 48rpx;
}

.bank-card-section {
	border-radius: 12rpx;
	padding: 32rpx;
	margin-bottom: 24rpx;
}

.section-title {
	font-size: 14px;
	color: #333333;
	margin-bottom: 24rpx;
}

.bank-card-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.bank-card-left {
	display: flex;
	align-items: center;
}

.bank-icon {
	margin-right: 24rpx;

	image {
		width: 35rpx;
		height: 35rpx;
	}
}

.bank-info {
	display: flex;
	flex-direction: column;
}

.bank-name {
	font-size: 14px;
	color: #333333;
	margin-bottom: 8rpx;
}

.arrival-time {
	font-size: 12px;
	color: #999999;
}

.amount-section {
	background: #FFFFFF;
	border-radius: 12rpx;
	// padding: 32rpx;
}

.amount-input-area {
	border-radius: 8rpx;
	padding: 30rpx 25rpx;
}

.amount-label {
	font-size: 14px;
	color: #333333;
	margin-bottom: 32rpx;
}

.amount-input-wrapper {
	display: flex;
	align-items: center;
	margin-bottom: 24rpx;
	margin-top: 120rpx;
	padding-bottom: 27rpx;
	border-bottom: 1px dashed #999;
}

.currency-symbol {
	font-size: 50rpx;
	color: #333333;
	margin-right: 16rpx;
}

.amount-input {
	flex: 1;
	font-size: 41rpx;
	color: #333333;
}

.available-amount {
	font-size: 12px;
	color: #999999;
}

.submit-section {
	margin-top: 48rpx;
}

.submit-btn {
	width: 100%;
	height: 88rpx;
	line-height: 88rpx;
	background: #0052D9;
	color: #FFFFFF;
	font-size: 16px;
	border-radius: 8rpx;
}

.submit-btn:active {
	opacity: 0.8;
}

.popup-content {
	position: fixed;
	top: 630rpx;
	left: -368rpx;
	width: 741rpx;
	height: 500rpx;
	background-color: #fff;
	border-radius: 20rpx 20rpx 0 0;

	.title {
		width: 741rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		background-color: #f2f2f2;
	}

	.bank-card-item {
		padding: 15rpx;
		margin-bottom: 10rpx;
		border-bottom: 1px #f2f2f2 dashed;
	}
}
</style>